<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集中养护大数据演示平台</title>
    <link rel="stylesheet" href="./css/index.css">
    <script>
        window._AMapSecurityConfig = {
            securityJsCode: 'a6c74cd3f0a9f9cfb5f0a3a31bd1e2e2',
        };
    </script>
</head>

<body>
    <header>
        <h1>集中养护大数据演示平台</h1>
        <div class="showTime1"></div>
        <div class="showTime2"></div>
    </header>

    <section class="mainbox">
        <div class="box1">
            <div class="panel1">
                <h2>高峰小时交通量</h2>
                <div id="peakTrafficChart" class="chart"></div>
            </div>
            <div class="panel2">
                <h2>交通组成</h2>
                <div id="trafficCompositionChart" class="chart"></div>
            </div>
        </div>

        <div class="box2">
            <div class="map" id="mapContainer">
                <h2>地图模块</h2>
                <div id="mapModuleChart" class="chart"></div>
            </div>
            <div class="panel4">
                <h2>历史同期交通量</h2>
                <div id="lineChart" class="chart"></div>
            </div>
        </div>

        <div class="box3">
            <div class="panel3">
                <h2>区域其他高速公路交通量</h2>
                <div id="otherHighwayTrafficChart" class="chart"></div>
            </div>
            <div class="panelm">
                <h2>国道交通组成比例</h2>
                <div id="pieChart" class="chart"></div>
            </div>
            <div class="panel5">
                <h2>轨迹的倾向</h2>
                <!-- 添加下拉框 -->
                <div>
                    <select id="roadSelect">
                        <option value="">请选择路网</option>
                    </select>
                </div>
                <div id="trajectoryTendencyChart" class="chart"></div>
            </div>
        </div>
    </section>

    <script src="./node_modules/papaparse/papaparse.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./node_modules/xlsx/xlsx.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=49e61b82b2884899005780d3851e3cab&plugin=AMap.Driving" async></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=49e61b82b2884899005780d3851e3cab" async></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="./js/charts.js"></script> 
    <script src="./js/map.js"></script> 

    <script>
        // 时间更新
        var t = null;
        t = setTimeout(time, 1000);

        function time() {
            clearTimeout(t);
            var dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime1").innerHTML = y + "年" + mt + "月" + day + "日";
            document.querySelector(".showTime2").innerHTML = h + ":" + m + ":" + s;
            t = setTimeout(time, 1000);
        }
    </script>
</body>

</html>
